<template>
  <ul class="nodeMenu">
    <li v-for="item in buttons" :key="item.name" @click="item.click(item); showContext(false)">
      <el-icon :color="item.color">
        <component :is="item.icon" v-if="item.icon" />
      </el-icon>
      <span v-text="item.name" />
    </li>
  </ul>
</template>
<script setup>
import { nodeMenuButton } from '../service/options';
import { shallowRef, watch } from 'vue';
import { showContext } from '../service/vueService';

const props = defineProps({
  // eslint-disable-next-line vue/require-default-prop
  data: null,
});
const buttons = shallowRef([]);
watch(
  () => props.data,
  cur => {
    if (cur) {
      buttons.value = nodeMenuButton(props.data, showContext);
    }
  },
  { immediate: true },
);
</script>
<style lang="scss" scope>
  
</style>